<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">

        var url;
        //禁止整体该页面的右键弹出html相关,不阻碍easyui右键
        $(function () {
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
                $('#tree-0').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
            $("#password").dblclick(changePwdBtn2Input);
        });

        function formatEdit(val, row) {
            return "<a href=\"javascript:openRoleChooseDialog('" + row.roles + "'," + row.id + ")\"><img style='margin-top: 4px' src='/static/images/edit.gif' /></a>";
        }

        function openRoleChooseDialog(roles, userId) {
            var rolesArr = roles.split(",");
            $("#roleSetDialog").dialog("open").dialog("setTitle", "选择角色");
            $("#roleDg").datagrid({
                url: '/admin/role/listAllRoles',
                onLoadSuccess: function (data) {
                    var selectedRows = $("#roleDg").datagrid('getRows');
                    for (var i = 0; i < selectedRows.length; i++) {
                        var name = selectedRows[i].rolename;
                        if ($.inArray(name, rolesArr) >= 0) {
                            $("#roleDg").datagrid('checkRow', i);
                        }
                    }
                }
            });
            $("#userId").val(userId);
        }

        function saveRoleSet() {
            var userId = $("#userId").val();
            var selectedRows = $("#roleDg").datagrid("getSelections");
            var strRoleIds = [];
            for (var i = 0; i < selectedRows.length; i++) {
                strRoleIds.push(selectedRows[i].id);
            }
            var roleIds = strRoleIds.join(",");
            $.post("/admin/user/saveRoleSet", {roleIds: roleIds, userId: userId}, function (result) {
                if (result.success) {
                    $.messager.alert("系统提示", "保存成功！");
                    closeRoleSetDialog();
                    $("#dg").datagrid("reload");
                } else {
                    $.messager.alert("系统提示", "提交失败，请联系管理员！");
                }
            }, "json");
        }

        function closeRoleSetDialog() {
            $("#roleSetDialog").dialog("close");
        }

        function deleteUser() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择要删除的数据！");
                return;
            }
            var id = selectedRows[0].id;
            $.messager.confirm("系统提示", "您确定要删除这条数据吗？", function (r) {
                if (r) {
                    $.post("/admin/user/deleteUserById", {id: id}, function (result) {
                        if (result.success) {
                            $.messager.alert("系统提示", "数据已成功删除！");
                            $("#dg").datagrid("reload");
                        } else {
                            $.messager.alert("系统提示", result.errorInfo);
                        }
                    }, "json");
                }
            });
        }

        function openUserAddDialog() {
            resetValue();
            $("#dlg").dialog("open").dialog("setTitle", "添加用户信息");
            url = "/admin/user/saveUser";
        }

        var pwdStat = 1;

        function openUserModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择一条要修改的数据！");
                return;
            }
            var row = selectedRows[0];
            $("#dlg").dialog("open").dialog("setTitle", "修改用户信息");
            $("#fm").form("load", row);
            $("#password").val("");
            changePwdInput2Btn();

            $("#yonghumingcheng").attr("readonly", "readonly")
            url = "/admin/user/saveUser?id=" + row.id;
        }

        // $("#password").dblclick(changePwdBtn2Input);


        function changePwdInput2Btn(){
            console.log("changePwdInput2Btn")
            // if(pwdStat == 1){
                console.log("changePwdInput to Btn")
                $("input[type='password']").attr('type', 'button');
                $("#password").val("双击修改密码");
                // pwdStat = 2;
            // }else{
            //     return;
            // }
        }

        function changePwdBtn2Input() {
            console.log("changePwdBtn2Input")
            // if (pwdStat == 2) {
                console.log("changePwdBtn to Input")
                $("input[type='button']").attr('type', 'password');
                $("#password").val("");
                // pwdStat = 1;
            // }else{
            //     return;
            // }
        }

        function saveUser() {
            $("#fm").form("submit", {
                url: url,
                onSubmit: function () {
                    return $(this).form("validate");
                },
                success: function (result) {
                    var result = eval('(' + result + ')');
                    if (result.success) {
                        $.messager.alert("系统提示", "保存成功！");
                        resetValue();
                        $("#dlg").dialog("close");
                        $("#dg").datagrid("reload");
                    } else {
                        $.messager.alert("系统提示", result.errorInfo);
                    }
                }
            });
        }

        function resetValue() {
            $("#yonghumingcheng").val("");
            $("#beizhu").val("");
            $("#password").val("");
            $("#truename").val("");
            // $("#remarks").val("");
        }

        function closeUserDialog() {
            $("#dlg").dialog("close");
            resetValue();
        }

        function searchUser() {
            $("#dg").datagrid('load', {
                "user.yonghumingcheng": $("#s_yonghumingcheng").val()
            });
        }

        $(function () {

            $("#dg").datagrid({
                //双击事件
                onDblClickRow: function (index, row) {
                    $("#dlg").dialog("open").dialog("setTitle", "修改用户信息");
                    $("#fm").form("load", row);
                    $("#password").val("");
                    changePwdInput2Btn();
                    $("#yonghumingcheng").attr("readonly", "readonly")
                    url = "/admin/user/saveUser?id=" + row.id;
                },
                onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    $(this).datagrid("clearSelections"); //取消所有选中项
                    $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                    $('#grid-data').menu('show', {
                        left: e.pageX,//在鼠标点击处显示菜单
                        top: e.pageY
                    });
                    e.preventDefault();  //阻止浏览器自带的右键菜单弹出
                },
            });


        });
    </script>
</head>
<body style="margin: 1px">
<table id="dg" title="用户管理" class="easyui-datagrid"
       fitColumns="true" pagination="true" rownumbers="true" singleSelect="true"
       url="/admin/user/listAllUser" fit="true" toolbar="#tb">
    <thead>
    <tr>
        <th field="id" width="20" align="center" sortable="true">编号</th>
        <th field="yonghumingcheng" width="50" align="center" sortable="true">用户名</th>
        <!--<th field="password" width="50" align="center">密码</th>-->
        <th field="truename" width="50" align="center" sortable="true">真实姓名</th>
        <th field="beizhu" width="80" align="center" sortable="true">备注</th>
        <th field="roles" width="150" align="center">拥有角色</th>
        <th field="aa" width="50" align="center" formatter="formatEdit">角色设置</th>
    </tr>
    </thead>
</table>

<div id="tb">
    <div>
        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <div>
        &nbsp;用户名：&nbsp;<input type="text" id="s_yonghumingcheng" size="20"
                               onkeydown="if(event.keyCode==13) searchUser()"/>
        <a href="javascript:searchUser()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog" style="width:450px;height:300px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">

    <form id="fm" method="post">
        <table cellspacing="8px">
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="yonghumingcheng" name="yonghumingcheng" class="easyui-validatebox"
                           required="true"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" id="password" name="password" class="easyui-validatebox" required="true"
                           style="width: 250px"/></td>
            </tr>
            <tr>
                <td>真实姓名：</td>
                <td><input type="text" id="truename" name="truename" class="easyui-validatebox" required="true"
                           style="width: 250px"/></td>
            </tr>
            <tr>
                <td valign="top">备注：</td>
                <td>
                    <textarea rows="5" cols="40" id="beizhu" name="beizhu"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeUserDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>

<div id="roleSetDialog" class="easyui-dialog" style="width:500px;height:350px;"
     closed="true" buttons="#dlg-buttons2">
    <input type="hidden" id="userId" name="userId"/>
    <table id="roleDg" class="easyui-datagrid" fitColumns="true"
           fit="true">
        <thead>
        <tr>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="50" align="left" hidden="true">编号</th>
            <th field="rolename" width="100" align="left">角色名称</th>
            <th field="roledesc" width="200" align="left">角色介绍</th>
        </tr>
        </thead>
    </table>

</div>

<div id="dlg-buttons2">
    <a href="javascript:saveRoleSet()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeRoleSetDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>

<!--大屏幕上右键datagrid dlg-->
<div id="grid-data" class="easyui-menu" style="width: 80px; display: none;">
    <div id="grid-data-edit" href="javascript:openUserModifyDialog()" data-options="iconCls:'icon-edit'">修改</div>
    <div id="grid-data-delete" href="javascript:deleteUser()" data-options="iconCls:'icon-remove'" plain="true">删除
    </div>
</div>
<!--二级菜单右键弹出-->
<div id="tree-2" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-2-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'">删除二级菜单</div>-->
</div>
<!--一级菜单右键弹出-->
<div id="tree-1" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-1-add-2" href="javascript:openTypeAddDialog()" data-options="iconCls:'icon-add'">添加二级菜单</div>-->
    <!--<div id="tree-1-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'">删除一级菜单</div>-->
</div>
<!--树形菜单右键弹出-->
<div id="tree-0" class="easyui-menu" style="width: 80px; display: none;">
    <!--<div id="tree-0-add-1" href="javascript:openTypeAddDialog(0)" data-options="iconCls:'icon-add'">添加一级菜单</div>-->
    <!--<div id="tree-0-refresh" href="javascript:reloadTree()" data-options="iconCls:'icon-reload'">重新加载类别</div>-->
</div>

</body>
</html>